<template>
    <div id="manage-AssociationClass">
        <BreadCrumb />
        <div class="jx-content" >
            <div class="manage-class-search">
                <el-form :inline="true" class="demo-form-inline clearfix" :model="formInline">
                    <el-form-item>
                        <el-input v-model="formInline.classInfo" placeholder="输入班级编号/名称" maxlength="20"></el-input>
                    </el-form-item>
                    <div class="button-style" style="margin-left:20px" @click="search">搜 索</div>
                </el-form>
            </div>
            <div class="select-list-box">
                <div class="history-tips" v-if="classList.length == 0">
                    <img src="./../../../assets/images/index_no_data.png" />
                    <p>暂无内容</p>
                </div>
                <el-row class="list-row" :gutter="20" v-else>
                    <el-col :span="12" v-for="(item, index) in classList" :key="index">
                        <div class="item-box" :class="{ 'active' : historyImportIndex !== '' &&  historyImportIndex == index }" @click="HistoryImportSelect(item.id, index)">
                            <div class="item-title">
                                <div class="title-left fl">
                                    <div class="title-left-heading">
                                        {{ item.name }}
                                        <span>{{ item.grade }}</span>
                                    </div>
                                    <div class="title-left-text">
                                        <span>编号：{{ item.id }}</span>
                                        <span>学生：{{ item.studentNum }}人</span>
                                        <!-- <span @click="lookList(index)">查看</span> -->
                                    </div>
                                </div>
                                <div class="title-right fr" >
                                    选择<i class="iconfont icon-ai226"></i>
                                </div>
                            </div>
                            <!-- <div class="item-content" v-show="item.listFlag ">
                                <span v-for="(item2, index2) in item.users" :key="index2">
                                    {{ item2.name }} <em v-if="index2 == 9">...</em>
                                </span>
                            </div> -->
                        </div>
                    </el-col>
                </el-row>
                <el-button v-if="classList.length > 0" class="button-style save-list" @click="save">保 存</el-button>
            </div>

        </div>
        <el-dialog :close-on-click-modal="false"  class="dialog-history-tips" title="提示" :visible.sync="dialogHistoryTips" width="490px">
            <div class="dialog-content">
                <div class="content-box">
                    <p v-for="item in historyTipsInfo">{{ item }}</p>
                </div>
                <div class="content-notation">
                    <!-- 注: 1、继续导入，重复学生从原班级移除。2、不导入，重复学生在原班级保留 。 -->
                    <el-radio v-model="historyImportRadio" label="1">继续导入，重复学生从原班级移除。</el-radio>
                    <el-radio v-model="historyImportRadio" label="2">不导入。</el-radio>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="HistoryTipUnImport">取消</el-button>
                <el-button class="button-style" @click="HistoryTipImport">确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import BreadCrumb from "@/components/BreadCrumb.vue";
    export default {
        components: {
            BreadCrumb
        },
        data() {
            return {
                // 班级ID
                coursesId: '',
                formInline: {
                    classInfo: ''
                },
                // 班级信息
                classList: '',
                historyImportIndex: '',
                historyImportId: '',

                // 添加 详情接收跳转参数
                params:'',
                // 添加 管理页面接收参数
                flag:'',

                dialogHistoryTips: false,
                // 用户对错误提示作出的决定 true：继续导入 ；false：过滤 ；null：没有作出决定
                errorFlag: '',
                // 导入不导入radio
                historyImportRadio: '1',
                // 提示信息
                historyTipsInfo: []
            }
        },
        created () {
            let self = this
            self.$nextTick(() => {
                $('.jx-content').css({
                    'height': $(window).height() - 106
                })

            })
            //yx修改 获取跳转参数
            self.params = self.$route.query.flag
            self.flag = self.$route.query.flagFns
            // 课程ID
            self.coursesId = self.$localstorage.getLocalStorage('setCourseId')
            // 获取列表
            self.getList()
        },
        methods: {
            // 获取列表
            getList() {
                let self = this
                self.$http.get('/tes/course/natural-class?classInfo='+self.formInline.classInfo).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         self.classList = res.data

                        if(self.classList.length > 0){
                            self.$nextTick(() => {
                                $('.list-row').css({
                                    'height': $(window).height() - 327
                                })
                            })
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 搜索
            search(){
                let self = this
                self.getList()
            },
            // 历史导入选择
            HistoryImportSelect(id, index){
                let self = this
                // 历史导入选中列表班级ID
                self.historyImportId = id
                self.historyImportIndex = index
            },
            // 查看班级学生列表
            lookList(index) {
                let self = this
                let classList = self.classList
                var listFlag = self.classList[index].listFlag
                classList.forEach(item => {
                    item.listFlag = false
                })
                classList[index].listFlag = !listFlag
                self.classList = classList
            },
            // 保存选择班级
            save(){
                let self = this
                if(self.historyImportId == ''){
                    self.$message.error('请选择班级')
                    return
                }
                const loading = this.$loading({
                    lock: true,
                    text: '保存班级中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/course/'+self.coursesId+'/exist-class?studentclassId='+self.historyImportId+'&errorFlag=').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        loading.close()
                        // 跳转课程详情页
                        self.$router.push({
                            path: '/Teaching/MyCourses/CourseDetail',
                            query: {
                                id: res.data
                            }
                        })
                        self.$localstorage.putLocalStorage('setCourseId',res.data)
                    }else if(res.code == '100105'){
                        loading.close()
                        // self.$confirm(res.message, '提示', {
                        //     confirmButtonText: '确定',
                        //     cancelButtonText: '取消',
                        //     type: 'warning',
                        //     closeOnClickModal: false
                        // }).then(() => {
                        //     self.callBack()
                        // })
                        self.historyTipsInfo = res.data
                        self.dialogHistoryTips = true
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 重复提示不导入
            HistoryTipUnImport() {
                let self = this
                // 关闭提示
                self.dialogHistoryTips = false
                self.historyTipsInfo = []
            },
            // 重复提示导入
            HistoryTipImport() {
                let self = this
                // 调用保存数据函数
                self.errorFlag = self.historyImportRadio == 1 ? true : false

                if(self.historyImportRadio == 1){
                    self.$http.post('/tes/course/'+self.coursesId+'/exist-class?studentclassId='+self.historyImportId+'&errorFlag='+self.errorFlag).then(response => {
                    let res = response.data
                        if(res.code == '200'){
                            if(self.params && !self.flag){
                                // 跳转班级管理页面
                                self.$router.push({
                                    path: '/Teaching/MyCourses/Management/ManageClass/ManageList',
                                })
                            }else{
                                // 跳转课程详情页
                                self.$router.push({
                                    path: '/Teaching/MyCourses/CourseDetail',
                                    query: {
                                        id: res.data
                                    }
                                })
                                self.$localstorage.putLocalStorage('setCourseId',res.data)
                            }
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else{
                    self.dialogHistoryTips = false
                }
                // self.onSubmit()

            },
            callBack(){
                let self = this
                self.$http.post('/tes/course/'+self.coursesId+'/exist-class?studentclassId='+self.historyImportId+'&errorFlag=true').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         if(self.params && !self.flag){
                            // 跳转班级管理页面
                            self.$router.push({
                                path: '/Teaching/MyCourses/Management/ManageClass/ManageList',
                            })
                        }else{
                            // 跳转课程详情页
                            self.$router.push({
                                path: '/Teaching/MyCourses/CourseDetail',
                                query: {
                                    id: res.data
                                }
                            })
                            self.$localstorage.putLocalStorage('setCourseId',res.data)
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style lang="scss">
    #manage-AssociationClass{
        .demo-form-inline{
            .el-input__inner{
                width: 218px;
            }
        }
        .el-dialog__footer{
            text-align: center;
            .dialog-footer{
                .el-button {
                    width: 90px;
                }
            }
        }
    }
</style>
<style lang="scss" scoped>
    @import "./../../../styles/layout/color_variables";
    #manage-AssociationClass{
        // margin-top: 24px;
        .jx-content{
            margin-top: 24px;
        }
        .save-list{
            width: 90px;
            margin: 40px auto 0;
            display: block;
        }
        .manage-class-search{
            margin: 23px 0 25px;
            height: 32px;
            .button-style{
                width: 90px;
            }
        }
        .content-select{
            height: 32px;
            line-height: 32px;
            .select-title{
                float: left;
                font-size: 18px;
                color: #385899;
            }
            .select-box{
                float: right;
                .el-input{
                    float: left;
                    width: 180px;
                    input{
                        width: 100%;
                    }
                }
                .button-style{
                    width: 90px;
                    text-align: center;
                    margin-left: 20px;
                }
            }
        }
        .el-row{
            overflow-y: scroll;
            &::-webkit-scrollbar {
                width: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background: #6589ae
            }
            .el-col{
                margin-bottom: 20px;
            }
            .item-box{
                border: solid 1px #dbdbdb;
                border-radius: 3px;
                padding: 16px 32px 19px 16px;
                height: 80px;
                box-sizing: border-box;
                cursor: pointer;
                &:hover{
                    border-color: #1277eb;
                }
                &.active{
                    border-color: #1277eb;
                }
            }
            .item-title{
                overflow: hidden;
                // height: 70px;
                .title-left-heading{
                    line-height: 16px;
                    font-size: 16px;
                    color: $title-gray;
                    span{
                        font-size: 14px;
                        color: #727272;
                        margin-left: 10px;
                    }
                }
                .title-left-text{
                    line-height: 14px;
                    margin-top: 14px;
                    span{
                        font-size: 14px;
                        color: $table-gray;
                        margin-right: 25px;
                        &:last-child{
                            color: $blue;
                            cursor: pointer;
                        }
                    }
                }
            }
            .title-right{
                // line-height: 53px;
                margin-top: 5px;
                font-size: 14px;
                color: $btn-blue;
                cursor: pointer;
                i{
                    font-size: 14px;
                    margin-left: 4px;
                }
            }
            .item-content{
                padding-top: 18px;
                border-top: solid 1px #d9d9d9;
                overflow: hidden;
                span{
                    float: left;
                    width: 20%;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-bottom: 24px;
                }
            }
        }
        .history-tips{
            text-align: center;
            margin-top: 80px;
            font-size: 16px;
            p{
                line-height: 40px;
                color: #8d8d8d;
            }
        }
        //历史导入提示
        .dialog-history-tips{
            .el-dialog__body{
                padding: 45px 60px 15px;
            }
            .dialog-content{
                p{
                    line-height: 28px;
                    span{
                        color: #385899;
                    }
                }
                .content-box{
                    max-height: 200px;
                    overflow-y: auto;
                    &::-webkit-scrollbar {
                        width: 4px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #c0c0c0;
                    }
                }
                .content-notation{
                    margin-top: 30px;
                    font-size: 12px;
                    line-height: 20px;
                    color: #1277eb;
                    padding-left: 20%;
                    .el-radio{
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
</style>
